import React, { Component } from "react";

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: 'Hello World',
      count: 0
    }
  }

  changeText() {
    //  1.setState的更多用法
    //  1.1 基本使用
    // this.setState({
    //   message: '你好世界'
    // })
    //  1.2 回调函数
    //  好处一：可以在回调函数中编写新的state的逻辑
    //  好处二：当前的回调函数会将之前的state和peops传递进来
    // this.setState((state, props) => {
    //   console.log(state,props);
    //   return {
    //     message: '你好世界'
    //   }
    // })
    //  1.3 setState在React的事件处理中是一个异步调用
    // 如果希望在数据更新之后，获取到对应的结果执行一些逻辑代码
    // 那么可以在setState中传入第二个参数callback
      this.setState({
        message: '你好世界'
      },
      () => {
        console.log('=====', this.state.message); // 这里是改变后的message
      })
      console.log('----', this.state.message);// 这里是改变前的message
  }
  changCount(val) {
    const { count } = this.state
    this.setState({
      count: count + val
    })
  }

  render() {
    const { message, count } = this.state
    return (
      <div>
        <div>
          message: {message}
          <button onClick={() => this.changeText()}>修改文本</button>
        </div>
        <div>
          <button onClick={() => this.changCount(1)}>+1</button>
          当前计数: {count}
          <button onClick={() => this.changCount(-1)}>-1</button>
        </div>
      </div>
    )
  }
}

export default App;
